<template>
    <div ref="tableDiv">
        <div class="tabBox">
            <el-table border :height="tableHeight"  v-loading="loading"
                      ref="multipleTable" :data="tableData" tooltip-effect="light" style="width: 100%"
                      @row-click="rowClick" :row-style="this.tableRowStyle" :row-class-name="rowClassName"
                      @select="select" @select-all="selectAll" >
                <el-table-column v-if="selectable" type="selection" align="center" min-width="40"/>
                <slot></slot>
            </el-table>
        </div>
        <!-- 分页组件 -->
        <miniPagination :page="page" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange " />
    </div>

</template>

<script>
export default {
  components: {},
  props: {
    /**
     * 是否开始多选模式，默认是单选
     * 设置为true，开启多选
     **/
    multiple: {
      type: Boolean,
      default () {
        return false
      }
    },
    /**
     * 首次加载是否自动查询
     **/
    firstQuery: {
      type: Boolean,
      default () {
        return true
      }
    },
    /**
     * 表格数据可选择
     **/
    selectable: {
      type: Boolean,
      default () {
        return true
      }
    }
  },
  data () {
    return {
      /**
       * 被选中的数据
       **/
      selectedRows: [],
      /**
       * 表格数据
       **/
      tableData: [],
      /**
        * 是否展示加载
       **/
      loading: false,
      tableHeight: '100%',
      // 页码
      page: {
        pageNo: this.$store.state.pageNo,
        pageSize: this.$store.state.pageSize,
        pageSizes: this.$store.state.pageSizes,
        total: this.$store.state.total
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.tableHeight = `calc(100vh - ${this.$refs.tableDiv.getBoundingClientRect().top + 70}px)`
    })
    if (this.firstQuery) {
      // 展示加载
      this.startLoading()
      // 回调数据查询
      this.$emit('search', this.page)
    }
  },
  methods: {
    rowClassName ({ row, rowIndex }) {
      if (this.selectedRows.includes((row))) {
        return 'select-row-highlight'
      }
      return ''
    },
    // 整行点击
    rowClick (row) {
      if (!this.selectable) {
        return
      }
      this.selectOneRow(row)
    },
    // 选中操作
    selectOneRow (row) {
      const newArr = this.selectedRows.filter((item) => row !== item)
      if (newArr.length === this.selectedRows.length) {
        if (!this.multiple) {
          // 单选
          this.clearSelection()
        }
        this.selectedRows.push(row)
        this.$refs.multipleTable.toggleRowSelection(row, true)
        this.$refs.multipleTable.setCurrentRow(row)
      } else {
        this.$refs.multipleTable.toggleRowSelection(row, false)
        this.selectedRows = newArr
      }
    },
    // 全选
    selectAll () {
      if (this.multiple) {
        if (this.selectedRows.length < this.tableData.length) {
          // 全选
          for (let i = 0; i < this.tableData.length; i++) {
            this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true)
          }
          this.selectedRows = this.tableData
          return
        }
      }
      this.clearSelection()
    },
    // 清空选中元素
    clearSelection () {
      this.$refs.multipleTable.clearSelection()
      this.selectedRows = []
    },
    // 选择按钮点击
    select (selection, row) {
      this.selectOneRow(row)
    },
    // 修改每页数量
    handleSizeChange (val) {
      this.page.pageNo = val.pageNo
      this.page.pageSize = val.pageSize
      // 展示加载
      this.startLoading()
      // 回调数据查询
      this.$emit('search', this.page)
    },
    // 切换页码
    handleCurrentChange (val) {
      this.page.pageNo = val.pageNo
      this.page.pageSize = val.pageSize
      // 展示加载
      this.startLoading()
      // 回调数据查询
      this.$emit('search', this.page)
    },
    // 设置要展示的数据
    setData (res) {
      this.tableData = res.records
      this.page.total = Number(res.total)
      this.selectedRows = []
      this.finishLoading()
    },
    // 关闭加载
    finishLoading () {
      this.loading = false
    },
    // 展示加载
    startLoading () {
      this.loading = true
    },
    /**
     * 重置列表数据
     **/
    resetData () {
      this.tableData = []
      this.page.pageNo = 1
      this.startLoading()
      // 这里会调用父类的请求去重新获取数据
      this.$emit('search', this.page)
      this.selectedRows = []
    },
    /**
     * 获取被选中元素
     **/
    getSelected () {
      if (this.multiple) {
        if (this.selectedRows.length <= 0) {
          this.$messageBox.warning('请选择一条数据！').catch(() => {})
          return false
        }
        return this.selectedRows
      } else {
        return this.getOneSelected()
      }
    },
    /**
     * 获取单个被选中元素
     **/
    getOneSelected () {
      if (this.selectedRows.length !== 1) {
        this.$messageBox.error('请选择一条数据！').catch(() => {})
        return false
      }
      return this.selectedRows[0]
    },
    /**
     * 获取选中元素的id
     * @param idField 指定唯一标识的属性名
     * @returns {*}
     */
    getSelectedId (idField) {
      const objArr = this.getSelected()
      if (objArr == false) {
        return false
      }
      if (Array.isArray(objArr)) {
        const idArr = objArr.map((item) => item[idField])
        return idArr
      }
      return objArr[idField]
    }
  }
}
</script>
